<template>
  <div class="background">
    <div style="margin: 16px 0 0 16px">
      <div class="butbox">
        <span class="a-button">账号:<a-input ipt v-model="text" class="search"></a-input></span>
        <span class="a-button">性别:<a-select v-model="sex" placeholder="请选择" class="search">
            <a-select-option value="">
              请选择
            </a-select-option>
            <a-select-option value="1">
              男性
            </a-select-option>
            <a-select-option value="2">
              女性
            </a-select-option>
          </a-select>
        </span>
        <span class="a-button" v-if="expand">真实姓名:<a-input ipt v-model="realname" class="search"></a-input></span>
        <span class="a-button" v-if="expand">手机号码:<a-input ipt v-model="phone" class="search"></a-input></span>
        <span class="a-button" v-if="expand">用户状态:<a-select v-model="status" placeholder="请选择" class="search">
            <a-select-option value="">
              请选择
            </a-select-option>
            <a-select-option value="1">
              正常
            </a-select-option>
            <a-select-option value="2">
              冻结
            </a-select-option>
          </a-select>
        </span>
        <a-button type="primary" class="a-button" @click="search">
          <a-icon type="search" />
          搜索
        </a-button>
        <a-button class="a-button" @click="reload1">
          <a-icon type="reload" />
          重置
        </a-button>
        <a :style="{ marginLeft: '8px', fontSize: '12px' }" @click="toggle">
          展开 <a-icon :type="expand ? 'up' : 'down'" />
        </a>
      </div>
      <div>
        <a-button type="primary" @click="showDrawer" class="a-button">
          <a-icon type="plus" />
          新增
        </a-button>
        <a-drawer title="新增" :width="720" :visible="visible" :body-style="{ paddingBottom: '80px' }" @close="onClose">
          <a-form class="newform">
            <a-form-model-item>
              用户账户:<a-input v-model="newform.name" class="input" />
            </a-form-model-item>
            <a-form-model-item>
              登录密码:<a-input v-model="newform.name" class="input" />
            </a-form-model-item>
            <a-form-model-item>
              确认密码:<a-input v-model="newform.name" class="input" />
            </a-form-model-item>
            <a-form-model-item>
              用户姓名:<a-input v-model="newform.name" class="input" />
            </a-form-model-item>
            <a-form-model-item>
              工号:<a-input v-model="newform.name" class="input" />
            </a-form-model-item>
            <a-form-model-item>
              工号:
            </a-form-model-item>
          </a-form>
          <div :style="{
            position: 'absolute',
            right: 0,
            bottom: 0,
            width: '100%',
            borderTop: '1px solid #e9e9e9',
            padding: '10px 16px',
            background: '#fff',
            textAlign: 'right',
            zIndex: 1,
          }">
            <a-button :style="{ marginRight: '8px' }" @click="onClose">
              Cancel
            </a-button>
            <a-button type="primary" @click="onClose">
              Submit
            </a-button>
          </div>
        </a-drawer>

        <a-button type="primary" class="a-button">
          <a-icon type="upload" />
          导出
        </a-button>
        <a-button type="primary" class="a-button">
          <a-icon type="export" />
          导入
        </a-button>
        <a-button type="primary" class="a-button">
          <a-icon type="hdd" />
          回收站
        </a-button>
      </div>
      <div>
      </div>
      <span style="margin-left: 8px">
        <template>
          <a-table :data-source="data1" bordered class="a-button" :pagination="ipagination1" @change="handleTableChange2"
          :scroll="{ x: 1300 }">
            <a-table-column key="" title="#" data-index="1">

            </a-table-column>
            <a-table-column key="code" title="编码" data-index="code" />
            <a-table-column key="name" title="名称" data-index="name" />
            <a-table-column key="shortName" title="简称" data-index="shortName" />
            <a-table-column key="customerLevelId_dictText" title="等级" data-index="customerLevelId_dictText" />
            <a-table-column key="taxInvoice" title="纳税规模" data-index="taxInvoice" />
            <a-table-column key="unitPayment" title="欠款额度" data-index="unitPayment" />
            <a-table-column key="website" title="客户网站" data-index="website" />
            <a-table-column key="phoneReceipt" title="法人电话" data-index="phoneReceipt" />
            <a-table-column key="isEnabled_dictText" title="是否启用" data-index="isEnabled_dictText" />

            <a-table-column key="action" title="操作" style="width:150 " data-index="action" fixed="right">
              <template slot-scope="text, record">
                <span>
                  <a>编辑 {{ record.firstName }}</a>
                  <a-divider type="vertical" />
                  <template>
                    <a-popconfirm key="id" title="确定要删除这个用户?" ok-text="确认" cancel-text="取消" @confirm="del(record.id)"
                      @cancel="cancel">
                      <a href="#">删除</a>
                    </a-popconfirm>
                  </template>
                </span>
              </template>
            </a-table-column>
          </a-table>
        </template>
      </span>
    </div>
</div>
</template>
<script>



import { getList } from "@/api/sqf";
import { Input } from "antd";
const ipt = () => <Input placeholder="Basic usage" />;

export default {
  name: "UserView",
  data() {

    return {
      ipt,
      expand: false,
      show: false,
      realname: "",
      phone: "",
      status: undefined,
      sex: undefined,
      text: "",
      data1: [],
      selectedRowKeys: [], // Check here to configure the default column
      loading: false,
      newform: [],
      visible: false,

      ipagination1: {
        current: 1,
        pageSize: 1,
        pageSizeOptions: ['10', '20', '30'],
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + '共' + total + '条'
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0
      },
    };
  },
  computed: {
    hasSelected() {
      return this.selectedRowKeys.length > 0;
    },
  },
  created() {
    this.getPostList()
  },
  methods: {
    toggle() {
      this.expand = !this.expand
    },
    //
    async getPostList() {
      const p = {
        _t: JSON.stringify(Date.now()).substring(0, 10),
        column: 'createTime',
        order: 'desc',
        field: 'id,,,code,name,shortName,customerLevelId_dictText,taxScale,arrearsLimit,website,corporatePhone,isEnabled_dictText,action',
        pageNo: 1,
        pageSize: 10,
      }
      const res = await getList(p)
      this.data1 = res.result.records
    },

    //删除
    // async del(id1) {
    //   const p = {
    //     id: id1
    //   }
    //   await delUser(p)
    //   this.getuserform()
    // },
    //搜索
    // async search() {
    //   const p = {
    //     _t: JSON.stringify(Date.now()).substring(0, 10),
    //     username: `*${this.text}*`,
    //     sex: this.sex,
    //     realname:this.realname,
    //     status:this.status,
    //     phone:this.phone,
    //     column: 'createTime',
    //     order: 'desc',
    //     field: 'id,,username,realname,avatar,sex_dictText,birthday,phone,orgCode,departIds_dictText,status_dictText,action',
    //     pageNo: 1,
    //     pageSize: 10,
    //   }
    //   const res = await getuser(p)
    //   if (res.status === 500) {
    //     localStorage.removeItem("token")
    //     window.open("/login")
    //     console.log("错误")
    //   }
    //   console.log(res)
    //   this.data1 = res.result.records
    // },
    //分页
    handleTableChange2(pagination) {
      this.ipagination1.current = pagination.current
      this.ipagination1.pageSize = pagination.pageSize
    },






    showDrawer() {
      this.visible = true;
    },
    onClose() {
      this.visible = false;
    },
    handleButtonClick(e) {
      console.log(e)
    },
    handleMenuClick(e) {
      console.log(e)
    },
    start() {
      this.loading = true;
      // ajax request after empty completing
      setTimeout(() => {
        this.loading = false;
        this.selectedRowKeys = [];
      }, 1000);
    },
    onDelete(key) {
      const dataSource = [...this.dataSource];
      this.dataSource = dataSource.filter(item => item.key !== key);
    },
    onSelectChange(selectedRowKeys) {
      console.log('selectedRowKeys changed: ', selectedRowKeys);
      this.selectedRowKeys = selectedRowKeys;
    },
    //重置键
    reload1() {
      this.realname = "",
        this.phone = "",
        this.status = undefined,
        this.sex = undefined,
        this.text = "",
        this.getuserform()
    }
  },
};
</script>
<style>
.input {
  width: 423.99px;
}

.butbox {
  width: 100%;
  padding: 10px;
  border: 10px;
}

.newform {
  padding: 20px 40px;
}

.a-button {
  margin-left: 10px;
}

.search {
  width: 243.45px;
  margin-bottom: 10px;

}

.dropdown {
  width: 279.5px;
}

.background {
  background-color: #fff;
  margin: 4px 4px 0px;
}
</style>